<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <link rel="stylesheet" href="/assets/css/animate.css">
        <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="/assets/fonts/iconfont.css">
        <link rel="stylesheet" href="/assets/css/headerFooter.css">
        <style type="text/css">
            /* 过渡开始 */
            .my-list {
                position: relative;
                --time: 0.8s;
                overflow: hidden;
                transition: var(--time);
                    height: 360px;
            }
            .my-list:hover{
                box-shadow: 0 0 30px rgba(0,0,0,0.3);
            }
            .my-list .img{
                transition: var(--time);
            }
            .my-list .imgh{
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                transition: var(--time);
            }
            .my-list:hover .img {
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
            }
            .my-list:hover .imgh {
                position: relative;
                opacity: 1;
            }
            .my-list .my-box{
                background-color: #fff;
               transition: var(--time);
            }
            .my-list:hover .my-box{
                 transform: translateY(-65px);
            }
            /* 结束 */
            .my-list h6 {
                color: #445a69;
                transition: 0.5s;
            }
            .my-list h6:hover {
                color: var(--title-hcolor);
            }
            .my-list p {
                color: #939ea9;
                font-size: 14px;
            }
            .my-list p .price{
                color: var(--title-hcolor);
                font-size: 18px;
            }
            .my-list p:last-child {
                letter-spacing: -5px;
            }
            .my-list p .icon-wujiaoxing {
                font-size: 16px;
                margin: 0;
                padding: 0;
                color: #fdcc0d;
            }
            .my-list a .icon-gouwuche{
                display: inline-block;
                margin-right: 10px;
                border-radius: 5px;
            }
            .my-list a{
                border: none;
                outline: none;
                width: 150px;
                height: 50px;
                margin-bottom: 10px;
                background-color: #ff324d;
                color: #fff;
                border-radius: 5px;
                border-bottom: 3px solid #ef304a;
            }
            .my-list a span {
                color: #fff;
            }

        </style>
	</head>
	<body>
        <div class="row ">
            <div class="col-md-6 col-xl-3 col-lg-4 py-3">
                <div class="my-list">
                        <img class="img w-100" src="/assets/images/p2.jpg" alt="">
                        <img class="imgh w-100" src="/assets/images/p2_hover.jpg" alt="">
                    <div class="my-box d-flex align-items-center justify-content-center flex-column">
                        <h6 class="mt-3">Unpaired Running Shoes</h6>
                        <p class="mb-0">￥60.00 <span class="price">￥25.00</span></p>
                        <p>
                            <span class="iconfont icon-wujiaoxing"></span>
                            <span class="iconfont icon-wujiaoxing"></span>
                            <span class="iconfont icon-wujiaoxing"></span>
                            <span class="iconfont icon-wujiaoxing"></span>
                            <span class="iconfont icon-wujiaoxing"></span></p>
                        <button><span class="iconfont icon-gouwuche"></span>加入购物车</button>
                    </div>
                </div>
            </div>
        </div>
	</body>
</html>

